<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Motion Guide Blitz Demo</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var canvas;
	var stage;

	function init() {
		createjs.MotionGuidePlugin.install(createjs.Tween);

		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
		stage.autoClear = true;

		var ball;
		var count = 750;

		while (count--) {
			ball = new createjs.Shape();
			ball.graphics.ss(1, 'round', 'round').s('#000000').f("#" + rc() + rc() + rc()).dc(0, 0, 6).ef().es();

			// Create a path that has between 3 and 7 x/y pairs
			var path = [];
			for (var i=0, l=(Math.random()*4|0 + 3); i<l; i++) {
				path.push(rx(), ry());
			}

			// Animate the ball along the path from start to finish, and then animate backwards.
			// The same could be done with a `bounce` tween, but this shows the MotionGuidePlugin position logic
			createjs.Tween.get(ball, {loop: true})
				.to({guide: {path: path, start: 0, end: 1}}, 5000)
				.wait(Math.random() * 4000) // Random delay between bounces
				.to({guide: {path: path, start: 1, end: 0}}, 5000);

			stage.addChild(ball);
		}

		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", stage);
	}

	// Get some random values.
	function rx() {
		return Math.random() * 940 + 10;
	}
	function ry() {
		return Math.random() * 380 + 10;
	}
	function rc() {
		return Math.round(Math.random() * 0xED + 0x12).toString(16);
	}

</script>
</head>
<body onload="init();">

<div>

	<header class="EaselJS">
		<h1>Motion Guide Blitz</h1>

		<p>A large set of similar MotionGuide tweens running at once. The tweens have a random set of x/y pairs, and
		will play forward, and then backwards using the <code>start</code> and <code>end</code> properties.</p>
	</header>

	<canvas id="testCanvas" width="960" height="350"></canvas>
	<br/>
	<input type="button" value="toggle paused"
		   onclick="createjs.Ticker.paused = !createjs.Ticker.paused;">

</div>

</body>
</html>
